<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>
<html>
<head>
    <meta property="qc:admins" content="325045366760117751756727" />
    <meta property="wb:webmaster" content="28e244326adb6a77" />
    <%@ include file="/resource/common_html_meat.jsp"%>
    <%@ include file="/resource/common_css.jsp"%>
</head>

<body>
<%@ include file="/indexMenu.jsp"%>

<div class="container container-fluid appt" style="color: #333;">
    <div class="row">
        <div class="col-md-8" id="accordion">
            <h2 class="text-center">Book Your Appointment</h2>
            <div class="appointment-step active">
                <h3 data-toggle="collapse" data-parent="#accordion" href="#collapse1">1.Appointment Type</h3>
                <div class="collapse in" id="collapse1">
                    <h5>Meet with a stylist to try on dresses and perfect your head-to-toe look.</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="apptTypeButton">
                                <input type="radio" name="appointmentType" id="bridal">
                                <label for="bridal">
                                    <div class="apptType">Bridal</div>
                                    <p class="apptDesc">Wedding Dresses & Accessories</p>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="apptTypeButton">
                                <input type="radio" name="appointmentType" id="partydress">
                                <label for="partydress">
                                    <div class="apptType">Bridal Party</div>
                                    <p class="apptDesc">Bridesmaids, Moms & Flower Girls</p>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="apptTypeButton">
                                <input type="radio" name="appointmentType" id="prom">
                                <label for="prom">
                                    <div class="apptType">Prom & Homecoming</div>
                                    <p class="apptDesc">Formal & Semiformal Dresses & Accessories</p>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="apptTypeButton">
                                <input type="radio" name="appointmentType" id="occasion">
                                <label for="occasion">
                                    <div class="apptType">Special Occasion</div>
                                    <p class="apptDesc">Party Dresses, Special Guests & Accessories</p>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="apptTypeButton">
                                <input type="radio" name="appointmentType" id="alterdress">
                                <label for="alterdress">
                                    <div class="apptType">Alterations</div>
                                    <p class="apptDesc">Personalize Your Dress</p>
                                </label>
                            </div>
                        </div>
                    </div>
                    <a href="" class="btn btn-normal uppercase"><b>save & continue to location & time</b></a>
                </div>
            </div>
            <div class="appointment-step">
                <h3 data-toggle="collapse" data-parent="#accordion" href="#collapse2">2.Location & Time</h3>
                <p id="collapse2" class="collapse">2222</p>
            </div>
            <div class="appointment-step">
                <h3 data-toggle="collapse" data-parent="#accordion" href="#collapse3">3.Contact Information</h3>
                <p id="collapse3" class="collapse">3333</p>
            </div>
            <div class="appointment-step">
                <h3 data-toggle="collapse" data-parent="#accordion" href="#collapse4">4.Review & Confirm</h3>
                <p id="collapse4" class="collapse">4444</p>
            </div>
            <%--<form>--%>
                <%--<div class="form-group">--%>
                    <%--<label for="exampleInputEmail1">Email address</label>--%>
                    <%--<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">--%>
                <%--</div>--%>
                <%--<div class="form-group">--%>
                    <%--<label for="exampleInputPassword1">Password</label>--%>
                    <%--<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">--%>
                <%--</div>--%>
                <%--<div class="form-group">--%>
                    <%--<label for="exampleInputFile">File input</label>--%>
                    <%--<input type="file" id="exampleInputFile">--%>
                    <%--<p class="help-block">Example block-level help text here.</p>--%>
                <%--</div>--%>
                <%--<div class="checkbox">--%>
                    <%--<label>--%>
                        <%--<input type="checkbox"> Check me out--%>
                    <%--</label>--%>
                <%--</div>--%>
                <%--<button type="submit" class="btn btn-default">Submit</button>--%>
            <%--</form>--%>
        </div>
        <div class="col-md-4 appt" data-spy="affix" data-offset-top="192" data-offset-bottom="40">
            <div class="appt-summary">
                <h4>Review the details of your appointment:</h4>
            </div>
        </div>
    </div>
</div>
<%@ include file="foot.jsp"%>
</body>
</html>
